3-4 最佳实践：ESLint+代码自动格式化
为什么不推荐 HBuilderX 内置格式化
HBuilderX 插件市场中的 ESLint 和 Prettier 插件质量参差不齐，常见问题包括：
- 评分普遍只有 3 星左右
- 使用 TypeScript 语法时校验报错
- 不支持
.uvue文件格式化 - 导出格式化错误、不支持特定语法
虽然 HBuilderX 内置了"保存时自动格式化"功能，但对语法错误的提示不够明显，不利于长期维护代码质量。
推荐方案：使用 CLI 创建项目 + VS Code 开发，配合完善的 ESLint + Prettier 工具链。需要调试时再用 HBuilderX 辅助。
安装依赖
基于 CLI 创建的 uni-app Vue 3 + Vite 项目，从 Vue CLI 官方模板中复制相关依赖配置：
# ESLint 核心
npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -D
# Prettier 及其 ESLint 集成
npm install prettier eslint-config-prettier eslint-plugin-prettier -D
# Vue 相关 ESLint 插件
npm install eslint-plugin-vue -D
# TypeScript 支持
npm install @types/node -D
bash
ESLint 配置
// .eslintrc.cjs
module.exports = {
root: true,
env: {
browser: true,
node: true,
es2021: true,
},
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
sourceType: 'module',
},
extends: [
'eslint:recommended',
'plugin:vue/vue3-recommended',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended',
],
rules: {
'vue/multi-word-component-names': 'off',
},
}
javascript
Prettier 配置
// .prettierrc
{
"semi": false,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 100,
"endOfLine": "auto"
}
javascript
VS Code 工作区配置
// .vscode/settings.json
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
json
package.json 脚本
{
"scripts": {
"dev:mp-weixin": "uni -p mp-weixin",
"build:mp-weixin": "uni build -p mp-weixin",
"lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix",
"format": "prettier --write \"src/**/*.{js,ts,vue,css,scss,json}\""
}
}
json
验证工具链是否正常：
# 运行 lint 检查
pnpm lint
# 运行格式化
pnpm format
bash
故意添加多余空格后运行 pnpm format，确认 Prettier 能自动格式化即可。
多编辑器协作
开发 uni-app 时通常需要同时打开多个工具：
| 工具 | 用途 |
|---|---|
| VS Code | 主要开发编辑器（代码编写、lint、格式化） |
| HBuilderX | 辅助调试（内置语法提示、快速运行） |
| 微信开发者工具 | 小程序预览和调试 |
CLI 创建的项目可以直接拖入 HBuilderX 中打开，使用其内置的语法提示和快速运行功能。
参考资源
- ESLint 官方文档 - 代码质量工具
- Prettier 官方文档 - 代码格式化工具
- uni-app VS Code 开发 - 官方文档
↑